import { View, Text, Image } from "@tarojs/components";
import FooterBarComponent from "@/components/footerBar/index";
import "./index.scss"
import api from "@/service/apiRequest"
import AvatarCard from "@/components/avatarCard";
import IconFont from "@/components/iconfont";
import PetCard from "./components/petCard";
import { useEffect, useState } from "react";
import PetMoment from "./components/petMoment";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { useUserInfo } from "@/hooks/useUserInfo";
import { IMG_URL } from "@/constants/api";
import EmptyComponent from "./components/empty";
import PetMomentList from "./components/petMomentList";

function TabBarHomeIndex() {
  const [petList, setPetList] = useState<PetListItem[]>([]);
  const [menuList, setMenuList] = useState<MenuItem[]>([]);
  const { userInfo, setUserInfoFn }: any = useUserInfo();
  const [petMomentList, setPetMomentList] = useState<PetMomentItem[]>([]);

  const handleToEditUserPage = async () => {
    if (!userInfo.pid) {
      setUserInfoFn(refreshPageRequestData);
    } else {
      Taro.navigateTo({
        url: "/userCenter/pages/editUser/index"
      })
    }
  }

  const refreshPageRequestData = async (userId: keyof UserInfo) => {
    requestPetList(userId);
    requestPostsList(userId);
  }

  const handleToMomentsList = () => {
    Taro.navigateTo({
      url: "/petMoments/pages/list/index"
    })
  }

  const handleSelectMenuList = (item: MenuItem) => {
    if (item.menuUrl) {
      Taro.navigateTo({
        url: item.menuUrl
      })
    } else {
      Taro.showToast({
        title: "功能暂未开放，敬请期待!",
        icon: "none"
      })
    }
  }

  const requestPetList = async (userId: keyof UserInfo) => {
    if (!userId) {
      return
    }
    let res = await api.get(`/api/pets/list/${userId}`);
    if (res) {
      setPetList(res);
    }
  }

  const requestMenuList = async () => {
    let res = await api.get("/api/menus", {category: "SYS_HOME_INDEX_MENU"});
    if (res) {
      setMenuList(res);
    }
  }

  const requestPostsList = async (userId: keyof UserInfo) => {
    if (!userId) {
      return
    }
    let res = await api.get("/api/posts", {
      userId,
      page: 1,
      perPage: 10,
    });
    if (res && res.posts) {
      setPetMomentList(res.posts);
    }
  }

  useLoad(() => {
    requestMenuList();
  })

  useDidShow(() => {
    requestPetList(userInfo.userId);
    requestPostsList(userInfo.userId);
  })

  const renderPetMomentList = () => {
    return petMomentList.length ? (
      <View className="moments-content">
        <PetMomentList list={petMomentList} refreshList={requestPostsList} />
      </View>
    ) : (
      <EmptyComponent />
    )
  }

  
  const renderMenuList = menuList.map((item, index) => {
    return (
      <View className="feature-item" key={index} onClick={() => handleSelectMenuList(item)}>
        <View className="feature-icon flex-c-c-c">
          <Image className="feature-icon-img" src={item.menuIcon} mode="aspectFit" webp />
        </View>
        <Text>{ item.menuName }</Text>
      </View>
    )
  })

  return (
    <>
      <View className="home-container">
        <View className="home-wrapper-box">
          {/* 头部用户信息 */}
          <View className="user-info">
            {/* 用户头像区域 */}
            <AvatarCard avatar={userInfo.avatarUrl || `${IMG_URL}/avatar.png`} username={userInfo.nickName ? userInfo.nickName : '登录'} descInfo="欢迎回来～" onClick={handleToEditUserPage} />
            {/* 宠物卡片区域 */}
            <PetCard petList={petList} />
          </View>

          {/* 疫苗提醒 */}
          <View className="vaccine-reminder">
            <View className="carrot-icon">
              <IconFont name="pet-yimiaoguan" size={40} />
            </View>
            <View className="reminder-text">
              {/* <Text>奶糖的狂犬疫苗提醒</Text>
              <Text className="reminder-date">距离下次接种还有5天</Text> */}
              <Text>萌宠的疫苗提醒</Text>
              <Text className="reminder-date">此功能暂未上线，敬请期待！</Text>
            </View>
          </View>

          {/* 功能导航 */}
          <View className="feature-nav">
            { renderMenuList }
          </View>
        </View>
        {/* 宠物动态 */}
        <View className="pet-moments">
          <View className="moments-header">
            <Text className="section-title">宠物动态</Text>
            <Text className="view-all" onClick={handleToMomentsList}>查看全部</Text>
          </View>
          { renderPetMomentList() }
        </View>
      </View>

      {/* 底部导航 */}
      <FooterBarComponent footerBarIndex={0} />
    </>
  )
}

export default TabBarHomeIndex;